<template lang="pug">
.survey-content-container
  .survey-content-header
    .survey-content-title 环境保护、社会责任、职业健康与安全体系
  el-form(:model="form" :rules="safeRules" ref="safeRules" label-width="150px" class="form-section-module" size="small")
    .survey-form
      .survey-form-title
        span 认证情况
        label
      .form-section
        el-form-item(label="是否通过质量管理体系认证：" prop="passedQualityCertification")
          el-radio-group(v-model="form.passedQualityCertification")
            el-radio(v-for="item in dropDwon.certificationList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
        el-form-item(label="相关报告及证书：" prop="certificationFileIds" v-if="form.passedQualityCertification == 1")
          .el-form-images
            .el-form-images-upload
              ali-upload(@getProgress="getProgress($event, 'qualityFileList')" @getFileInfo="getFileInfo($event, 'certificationFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'qualityFileList')")
                .el-form-upload_btn
                  .iconfont.el-icon-plus
                  .el-form-upload_btn-text 上传图片
              .upload-image(v-for="item, index in form.qualityFileList" :key="index")
                img.upload-image-body(:src="item.fileSrc")
                .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'qualityFileList', 'certificationFileIds')")
                  .iconfont.el-icon-circle-close
        el-form-item(label="是否通过职业健康安全管理体系认证：" prop="passedHealthCertification")
          el-radio-group(v-model="form.passedHealthCertification")
            el-radio(v-for="item in dropDwon.certificationList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
        el-form-item(label="相关报告及证书：" prop="healthCertificationFileIds" v-if="form.passedHealthCertification == 1")
          .el-form-images
            .el-form-images-upload
              ali-upload(@getProgress="getProgress($event, 'healthFileList')" @getFileInfo="getFileInfo($event, 'healthCertificationFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'healthFileList')")
                .el-form-upload_btn
                  .iconfont.el-icon-plus
                  .el-form-upload_btn-text 上传图片
              .upload-image(v-for="item, index in form.healthFileList" :key="index")
                img.upload-image-body(:src="item.fileSrc")
                .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'healthFileList', 'healthCertificationFileIds')")
                  .iconfont.el-icon-circle-close
        el-form-item(label="是否通过环境管理体系认证：" prop="passedEnvironmentCertification")
          el-radio-group(v-model="form.passedEnvironmentCertification")
            el-radio(v-for="item in dropDwon.certificationList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
        el-form-item(label="相关报告及证书：" prop="environmentCertificationFileIds" v-if="form.passedEnvironmentCertification == 1")
          .el-form-images
            .el-form-images-upload
              ali-upload(@getProgress="getProgress($event, 'environmentFileList')" @getFileInfo="getFileInfo($event, 'environmentCertificationFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'environmentFileList')")
                .el-form-upload_btn
                  .iconfont.el-icon-plus
                  .el-form-upload_btn-text 上传图片
              .upload-image(v-for="item, index in form.environmentFileList" :key="index")
                img.upload-image-body(:src="item.fileSrc")
                .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'environmentFileList', 'environmentCertificationFileIds')")
                  .iconfont.el-icon-circle-close
  .survey-section-footer
    el-button(name="survey" plain @click="prevStep") 上一步，填写质量保证能力
    el-button(name="survey" @click="nextStep") 下一步，选择相关证书资料
</template>

<script>
import aliUpload from "@/components/customUpload"
export default {
  name: 'safeModule',
  props: {
    dropDwon: Object,
    parentForm: Object
  },
  components: {
    aliUpload
  },
  data () {
    var validatePassed = (rule, value, callback) => {
      if (parseInt(this.form[rule.key]) === 1) {
        if (!this.form[rule.fileKey].length) {
          callback(new Error(rule.message))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      fileAgain: null,
      // qualityFileList: [],
      // healthFileList: [],
      // environmentFileList: [],
      form: {
        qualityFileList: [],
        healthFileList: [],
        environmentFileList: [],
        passedQualityCertification: '', // 是否通过质量管理体系认证
        passedHealthCertification: '', // 是否通过职业健康安全管理体系认证
        passedEnvironmentCertification: '', // 是否通过环境管理体系认证
        environmentCertificationFileIds: [], // 环境管理体系认证文件
        healthCertificationFileIds: [], // 职业健康安全管理体系认证文件
        certificationFileIds: [], // 质量管理体系认证文件
      },
      safeRules: {
        passedQualityCertification: [
          { required: true, message: '请选择是否通过质量管理体系认证！', trigger: 'change' }
        ],
        certificationFileIds: [
          { required: true, validator: validatePassed, message: '请上传相关证书或证明！', key: 'passedQualityCertification', fileKey: 'certificationFileIds', trigger: 'blur' }
        ],
        passedHealthCertification: [
          { required: true, message: '请选择是否通过职业健康安全管理体系认证！', trigger: 'change' }
        ],
        healthCertificationFileIds: [
          { required: true, validator: validatePassed, message: '请上传相关证书或证明！', key: 'passedHealthCertification', fileKey: 'healthCertificationFileIds', trigger: 'blur' }
        ],
        passedEnvironmentCertification: [
          { required: true, message: '请选择是否通过环境管理体系认证！', trigger: 'change' }
        ],
        environmentCertificationFileIds: [
          { required: true, validator: validatePassed, message: '请上传相关证书或证明！', key: 'passedEnvironmentCertification', fileKey: 'environmentCertificationFileIds', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    getProgress (file, key) {
      this.setTempFileList(file, key)
    },
    getFileInfo (data, key) {
      this.form[key].push(...data)
    },
    setTempFileList (fileList, key) {
      fileList.forEach(item => {
        let index = this.form[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.form[key][index] = item
        } else {
          this.form[key].push(item)
        }
      })
    },
    setItemFile (item, key) {
      let index = this.form[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.$set(this.form[key], index, item)
        } else {
          this.form[key].push(item)
        }
    },
    again (item) {
      this.fileAgain = { ...item, isSuccess: 1 }
    },
    deleteFile (item, tempKey, formKey) {
      let tempIndex = this.form[tempKey].findIndex(row => row.uid === item.uid)
      let formIndex = this.form[formKey].findIndex(row => row.uid === item.uid)
      if (tempIndex > -1) {
        this.form[tempKey].splice(tempIndex, 1)
      }
      if (formIndex > -1) {
        this.form[formKey].splice(formIndex, 1)
      }
    },
    getAgainProgress (item, key) {
      this.fileAgain = null
      this.setItemFile(item, key)
    },
    prevStep () {
      this.$emit('change', { form: this.form, nextRouter: 'quality' })
    },
    nextStep () {
      this.$refs.safeRules.validate((valid) => {
        if (!valid) {
          this.$message.error('请仔细核对资料填写是否正确！')
          return
        }
        this.$emit('change', { form: this.form, nextRouter: 'certificate' })
      })
    },
  },
  created () {
    this.form = { ...this.form, ...this.parentForm }
  }
}
</script>

<style lang="scss" scoped>
.survey-content-container {
  width: 100%;
  background: #fff;
  padding: 25px 22px;
}
.survey-content-header {
  display: flex;
  .survey-content-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #d7000f;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.survey-form {
  margin-top: 5px;
  .survey-form-title {
    display: flex;
    align-items: center;
    padding: 16px 0;
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 26px;
      padding-right: 10px;
    }
    label {
      height: 1px;
      flex: 1;
      background: #EDEDED;
    }
  }
}
.form-section {
  background: #F6F6F9;
  border-radius: 6px;
  padding: 25px 20px;
  &.form-small-section {
    margin-bottom: 16px;
  }
}
.form-item-small {
  width: 275px;
}
.form-item-input_ft {
  padding: 0 10px;
  color: #000;
  line-height: 32px;
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
.el-form-images-upload {
  display: flex;
  flex-wrap: wrap;
}
.upload-image {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, .2);
  border-radius: 4px;
  position: relative;
  .upload-image-body {
    max-width: 100%;
    max-height: 100%;
  }
  .upload-image-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .upload-image-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    line-height: 1;
    cursor: pointer;
    .iconfont {
      font-size: 20px;
      color: #FF708B;
    }
  }
}
.el-form-upload_btn {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px dashed #DCDFE6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  .iconfont {
    font-size: 16px;
    color: #B2B4C7;
  }
  .el-form-upload_btn-text {
    margin-left: 3px;
    font-size: 12px;
    color: #B2B4C7;
  }
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
</style>